<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <title>公司简介过度</title>
    <style>
        body {
            font-family: "微软雅黑";
        }

        .title {
            font-size: 16px;
            cursor: pointer;
        }

        .content {
            font-size: 14px;
            width: 500px;
            line-height: 30px;
            margin-top: 20px;
            text-indent: 30px;
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: all .5s ease;
        }

        .fade-enter,
        .fade-leave-to {
            transform: translateY(-20px);
            opacity: 0;
        }
    </style>

</head>

<body>
    <div id="box" align="center">
        <div class="title" v-on:click="show=!show">公司简介</div>
        <transition name="fade">
            <div align="left" class="content" v-if="show">
                吉林省晨*科技有限公司是一家以计算机软件技术为核心的高科技型企业。
                公司创建于1999年12月，是专业的应用软件开发商和服务提供商。
                多年来始终致力于行业管理软件开发、数字化出版物开发制作、
                行业电子商务网站开发等，先后成功开发了涉及生产、管理、物流、营销、
                服务等领域的多种企业管理应用软件和应用平台，目前已成为计算机出版行业的知名品牌。
            </div>
        </transition>
    </div>
    <script>
        new Vue({
            el: '#box',
            data: {
                show: false
            }
        })
    </script>
</body>

</html>